<template>
  <div class="">
    <el-date-picker v-model="dateValue" type="daterange" range-separator="-" :unlink-panels="true"
                start-placeholder="起始日期" end-placeholder="结束日期" @change="dateChange" value-format="YYYY-MM-DD"
                :shortcuts="shortcuts" />
  </div>
</template>

<script lang='ts' setup>
import { ref } from "vue"

const dateValue = ref([])

const emit = defineEmits(["dateChange"])
//日期改变
const dateChange = (e: any) => {
  if (e != null) {
    emit("dateChange", e)
  }
  else {
    emit("dateChange", false)
  }
}

//定义快速选择日期格式
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近3个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<style  scoped>
</style>
